<template>
    <li @click="$router.push('/item-detail/' + item.id)" class="item-cell">
      <div class="img">
        <img :src="item.img_show" alt="">
      </div>
      <div class="title">
        {{item.name}}
      </div>
      <div class="price">¥{{item.price}}</div>
      <div class="sale">已售{{item.sold_out}}件</div>
    </li>
</template>

<script>
export default {
  props:['item']
};
</script>

<style lang="less" scoped>
.item-cell {
  width:100%;
  position: relative;
  background-color: #fff;
  color: rgba(68, 68, 68, 1);
  font-size: 0.58rem;
  display: flex;
  padding: 0.48rem 3.2%;
  .img {
    height: 3.6rem;
    width: 3.6rem;
    background-color: #dfdfdf;
    margin-right: 0.48rem;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .title {
    width: calc(100% - 3.6rem);
  }
  .price {
    position: absolute;
    color: rgba(253, 85, 94, 1);
    font-size: 0.64rem;
    left: calc(3.2% + 4.08rem);
    bottom: 0.48rem;
  }
  .sale {
    position: absolute;
    color: rgba(153, 153, 153, 1);
    font-size: 0.58rem;
    bottom: 0.48rem;
    right: 3.2%;
  }
}
</style>
